<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>路线打印</title>
    <link rel="stylesheet" href="res/layui.css" media="all">
    <style type="text/css">
        .map-left {
            height:100vh;overflow: auto; padding: 10px;
        }
        .page {
            width: 100%; background-color: #eee;
        }
        .address-content .label {
            width: 30%;
            display: inline-block;
        }
        .address-content .text {
            width: 70%;
            display: inline-block;
        }
    </style>
    <!--Map-->
    <style type="text/css">
        #container {
            height:100vh;
        }
        .input-card {
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 6rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
        }
        .btn {
            font-size: 12px;
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            background-color: transparent;
            background-image: none;
            color: #25A5F7;
            border-color: #25A5F7;
            padding: .25rem .5rem;
            line-height: 1.5;
            border-radius: 1rem;
            -webkit-appearance: button;
            cursor:pointer;
        }
        .btn:hover {
            color: #fff;
            background-color: #25A5F7;
            border-color: #25A5F7
        }
        .btn:hover {
            text-decoration: none
        }
    </style>
</head>
<body>

<div class="page" id="page">
    <div class="layui-row content">
        <div class="layui-col-md12 map-left">
            <div id="container"></div>
        </div>
    </div>
    <div class="input-card">
        <!--<input id="setFitView" type="button" class="btn" value="打印" @click="printView()"/>-->
        <input type="button" class="btn" value="显示/隐藏地址" @click="toggleAddress(isShow)"/>
    </div>
</div>

<script src="res/layui.js"></script>
<script src="res/vue.js"></script>
<script src="./res/axios.min.js"></script>
<script src="res/jquery.js"></script>
<script src="res/layer/layer.js"></script>
<script src="../../js/lib/rest.js"></script>
<script language="javascript" src='/education/jsfile/LodopFuncs.js'></script>
<script type="text/javascript">
    Vue.prototype.$axios = axios;   // 2、在vue中使用axios
    var app = new Vue({
        el: '.page',
        data: {
            route: {},
            items: [],
            markerList:[],
            isShow: true
        },
        methods: {
            post(url, param) {
                return this.$axios.post(url, this.convertObj(param), {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            },
            convertObj(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if(value) {
                        if (value.constructor == Array) {
                            value.forEach(function(_value) {
                                _result.push(key + "=" + _value);
                            });
                        } else {
                            _result.push(key + '=' + value);
                        }
                    }
                }
                return _result.join('&');
            },
            loadData() {
                let that = this;
                this.post('/education/admin/pages/routeList/getMarkList', {routeid: getQueryString('rid')}).then(function (rs) {
                    var res = rs.data;
                    if(res.code == 200) {
                        that.route = res.data.route;
                        that.items = res.data.items;
                        that.showMarkerInMap(that.route, that.items)
                        document.getElementsByTagName("title")[0].innerText = '打印地图——' + that.route.routename;
                    }
                })
            },
            showMarkerInMap(route, list) {
                let markerList = [];
                for(let i=0; i<list.length; i++) {
                    let o = list[i]
                    let pos = o.stationid ? [o.station_marklng, o.station_marklat] : [o.marklng, o.marklat]
                    let a = common_map.createMarker2(o.ord, pos, i, '#' + route.routecolor)
                    let num = o['idarr'] && o['idarr'].length
                    let content = ''
                    if(num > 1) {
                        content = '共' + num + '个订单';
                        a.setLabel({content})
                    }
                    a.setExtData(content)
                    markerList.push(a)
                }
                this.markerList = markerList
                common_map.clearMap()
                common_map.addMarkers(markerList)
                common_map.setCenter()
            },
            printView() {
                window.print()
            },
            toggleAddress(show) {
                this.isShow = !show;
                let mlist = this.markerList
                let list = this.items
                for(let i=0; i< mlist.length; i++) {
                    let o = mlist[i]
                    o.setLabel({content: show ? list[i].address_detail || list[i].station_detail : o.getExtData()})
                }
            }
        }
    })
    window.onload = function () {
        app.loadData()
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=effff8de239e3c06c98cd3c45694afcc"></script>
<script type="text/javascript" src="map.js"></script>
</body>